<!-- subpkg_consult/description/index.vue -->
<script setup>
	import { ref, computed } from 'vue'
	import { storeToRefs } from 'pinia'
	import { useConsultStore } from '@/stores/consult.js'
	const props = defineProps({
		type: String,
		illnessType: String,
		depId: String,
	})
	const illnessTimes = [
		{
			value: 1,
			text: '一周内',
		},
		{
			value: 2,
			text: '一月内',
		},
		{
			value: 3,
			text: '半年内',
		},
		{
			value: 4,
			text: '半年以上',
		},
	]
	const { illnessInfo, initalValue } = storeToRefs(useConsultStore()) // 通过storeToRefs处理的数据解构后是响应式的
	// const illnessInfo = ref({
	// 	illnessTime: '',
	// 	illnessDesc: '',
	// 	consultFlag: '',
	// 	pictures: [],
	// })
	if (illnessInfo.value.illnessDesc) {
		uni.showModal({
			title: '温馨提示',
			content: '是否恢复之前填写的病情信息？',
			confirmText: '确认',
			confirmColor: '#16c2a3',
			cancelColor: '#848484',
			success: (res) => {
				if (!res.confirm) {
					illnessInfo.value = { ...initalValue.value }
				}
			},
		})
	}
	const onTimeTagClick = (value) => {
		illnessInfo.value.illnessTime = value
	}
	const consultFlags = [
		{ value: 1, text: '就诊过' },
		{ value: 0, text: '没有就诊过' },
	]
	const onFlagTagClick = (value) => {
		illnessInfo.value.consultFlag = value
	}
	const nextStepEnable = computed(() => {
		return (
			illnessInfo.value.illnessDesc !== '' &&
			illnessInfo.value.illnessTime !== '' &&
			illnessInfo.value.consultFlag !== ''
		)
	})
	const onNextStepClick = () => {
		const consultStore = useConsultStore()
		consultStore.type = props.type
		consultStore.illnessType = props.illnessType
		consultStore.depId = props.depId
		uni.navigateTo({
			url: '/subpkg_consult/patient/index',
		})
	}
</script>

<template>
	<scroll-page>
		<view class="description-page">
			<!-- 在线医生 -->
			<view class="doctor-online">
				<image
					src="/static/uploads/doctor-avatar-2.png"
					class="doctor-avatar"
				/>
				<view class="doctor-info">
					<view class="name">在线医生</view>
					<view class="message">
						请描述你的疾病或症状、是否用药、就诊经历，需要我听过什么样的帮助
					</view>
					<view class="tips">
						<text class="iconfont icon-shield"></text>
						内容仅医生可见
					</view>
				</view>
			</view>
			<!-- 患者信息 -->
			<view class="patient-info">
				<view class="description">
					<uni-easyinput
						type="textarea"
						v-model="illnessInfo.illnessDesc"
						:styles="{ backgroundColor: '#f6f6f6' }"
						:input-border="false"
						placeholder-style="font-size: 30rpx; color: #979797"
						placeholder="请详细描述您的病情,病情描述不能为空"
					/>
				</view>

				<view class="title">本次患病多久了？</view>
				<view class="tags">
					<text
						:class="{ active: illnessTime.value === illnessInfo.illnessTime }"
						class="tag"
						v-for="illnessTime in illnessTimes"
						:key="illnessTime.value"
						@click="onTimeTagClick(illnessTime.value)"
						>{{ illnessTime.text }}</text
					>
				</view>

				<view class="title">此次病情是否去医院就诊过？</view>
				<view class="tags">
					<text
						:class="{ active: item.value === illnessInfo.consultFlag }"
						class="tag"
						v-for="item in consultFlags"
						:key="item.value"
						@click="onFlagTagClick(item.value)"
					>
						{{ item.text }}
					</text>
				</view>
			</view>
			<!-- 上传图片 -->
			<view class="patient-picture">
				<uni-file-picker
					v-model="illnessInfo.pictures"
					title="上传病情相关图片 (仅医生可见)"
					limit="8"
					:image-styles="{ width: '160rpx', height: '160rpx' }"
					file-extname="png,jpg,gif,webp"
				/>
			</view>
		</view>
		<!-- 下一步操作 -->
		<view class="next-step">
			<button
				class="uni-button"
				:disabled="!nextStepEnable"
				@click="onNextStepClick"
			>
				下一步
			</button>
		</view>
	</scroll-page>
</template>

<style lang="scss">
	@import './index.scss';
</style>
